<template>
  <!--  搜索-->
  <div v-show="!ifUtools">
    <el-image :src="require('@/assets/logo.png')"
              style="width: 60px"></el-image>
    <div class="title_box">航空制造术语检索</div>
    <div class="search_box">
      <el-input ref="search" placeholder="请输入航空制造术语缩写" autofocus v-model="keyword"></el-input>
    </div>
  </div>
  <div class="container">
    <template v-for="i in Math.ceil(result.length/4)">
      <el-row :gutter="2" v-if="i%3===0">
        <template v-for="j in 4">
          <el-col :span="6" v-if="result[4*i + j]">
            <el-card class="card-body">
              <div>
                <div style="height: 60px" >
                  <label style="color: #409EFF;
                line-height: 28px; font-size: 20px; font-weight: bold"
                         v-html="result[4*i + j].getTitle()"></label>
                </div>
                <hr style="width:100%;border-top: 2px dashed #909399;"/>

                <div>
                  <p style="color: #909399; font-size: 18px" v-html="result[4*i + j].getBody()">
                  </p>
                  <img style="filter:contrast(1%);
                   position: absolute;
                   opacity:0.1" :src="require('@/assets/plane01.png')"/>
                </div>
              </div>
            </el-card>
          </el-col>
        </template>
      </el-row>
    </template>


    <el-card v-if="result.length === 0">
      <el-image :src="require('@/assets/no.png')"
                style="width: 240px"></el-image>
      <h2>无数据</h2>
    </el-card>
  </div>

</template>

<script lang="ts">
import {Vue} from "vue-class-component";
import {termList} from '@/data/terms'
import axios from "axios";
import {Term} from "@/lib/Obj";

export default class TermSearch extends Vue {
  keyword = ''
  termList = termList
  ifUtools = false

  mounted() {
    //@ts-ignore
    this.$utoolFun().then(utools => {
      utools.onPluginReady(() => {
        utools.setExpendHeight(800)
      })
      utools.onPluginEnter(() => {
        this.ifUtools = true
        utools.setExpendHeight(800)
        utools.setSubInput(({text}) => {
          this.keyword = text
        }, '请输入航空制造术语缩写', true)
        console.log("插件加载完毕")
        axios.get("http://123.56.253.88:7772/fullData").then(res => {
          this.termList = res.data.map(it => new Term(it))
        })

      })
    })
  }

  get result() {
    Term._keyword = this.keyword
    return !!this.keyword
        ? this.termList.filter(term => {
          return term.match(this.keyword)
        }).sort((a, b) => a.score - b.score > 0 ? -1 : 1)
        : this.termList
  }

}
</script>

<style scoped>
.title_box {
  width: 300px;
  line-height: 80px;
  vertical-align: middle;
  margin: auto;
  font-size: 32px;
}

.search_box {
  margin: auto;
  width: 92vw;

}


.container {
  margin: auto;
  width: 92vw;
  border: 1px solid gainsboro;
  border-radius: 5px;
  height: 92vh;
  overflow: auto;
}

.card-body {
  margin: 20px;
  height: 300px;
  overflow: auto;
  text-align: left;
  border-radius: 20px 20px 0 0  ;
  /*background-color: #faecd8;*/
}

</style>
<style>
.search_box input {
  height: 45px;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}

cusmark {
  color: #F56C6C;
}

cusmark2 {
  color: #67C23A;
}
</style>
